<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>纯css制作气泡对话框</title>
		<style type="text/css">
			/*
			   对话气泡
			   用法：使用.speech-bubble和.speech-bubble-DIRECTION类
			  <div class="speech-bubble speech-bubble-top">Hi there</div>
			*/
			
			.speech-bubble {
				display: inline-block;
				margin: 20px;
				position: relative;
				background-color: #292929;
				width: 200px;
				height: 150px;
				line-height: 150px;
				/* 垂直居中 */
				color: white;
				text-align: center;
				border-radius: 10px;
				font-family: sans-serif;
			}
			
			.speech-bubble:after {
				content: '';
				position: absolute;
				width: 0;
				height: 0;
				border: 15px solid;
			}
			/* 箭头的位置 */
			.speech-bubble-top:after {
				border-bottom-color: #292929;
				left: 50%;
				bottom: 100%;
				margin-left: -15px;
			}
			
			.speech-bubble-right:after {
				border-left-color: #292929;
				left: 100%;
				top: 50%;
				margin-top: -15px;
			}
			
			.speech-bubble-bottom:after {
				border-top-color: #292929;
				top: 100%;
				left: 50%;
				margin-left: -15px;
			}
			
			.speech-bubble-left:after {
				border-right-color: #292929;
				top: 50%;
				right: 100%;
				margin-top: -15px;
			}
		</style>
	</head>

	<body>
		<h1>纯css制作气泡对话框</h1>
		<div class="speech-bubble speech-bubble-top">
			箭头在顶部
		</div>
		<div class="speech-bubble speech-bubble-bottom">
			箭头在底部
		</div>
		<div class="speech-bubble speech-bubble-left">
			箭头在左侧
		</div>
		<div class="speech-bubble speech-bubble-right">
			箭头在右侧
		</div>
	</body>

</html>